<template>
  <div class="container">
    <h1>根据分数查询大于的电影</h1>
    <form @submit.prevent="fetchMoviesByScore">
      <div class="form-group">
        <label for="score">输入分数:</label>
        <input
          type="number"
          class="form-control"
          id="score"
          v-model="score"
          step="0.1"
          min="0"
          max="10"
          required
        />
      </div>
      <button type="submit" class="btn btn-primary">查询</button>
    </form>

    <div v-if="movies.length > 0" class="mt-4">
      <h2>分数为 {{ score }} 的电影:</h2>
      <ul class="list-group">
        <li v-for="movie in movies" :key="movie.URL" class="list-group-item">
          <strong>{{ movie.TITLE }}</strong><br />
          <strong>评分:</strong> {{ movie.SCORE }}<br />
          <strong>票房:</strong> {{ formatBoxOffice(movie.BOXOFFICE) }}<br />
          <strong>封面链接:</strong> <a :href="movie.COVER_URL" target="_blank">{{ movie.COVER_URL }}</a><br />
          <strong>详情链接:</strong> <a :href="movie.URL" target="_blank">{{ movie.URL }}</a>
        </li>
      </ul>
    </div>

    <div v-if="movies.length === 0 && !error" class="mt-4">
      <p>没有找到分数为 {{ score }} 的电影。</p>
    </div>

    <div v-if="error" class="alert alert-danger mt-4">
      {{ error }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      score: '',
      movies: [],
      error: '',
    };
  },
  methods: {
    async fetchMoviesByScore() {
      try {
        const response = await axios.get('http://127.0.0.1:8000/api/score_n_big', {
          params: {
            n: this.score,
          },
        });

        if (response.data.code === 0) {
          if (response.data.data.length > 0) {
            this.movies = response.data.data;
            this.error = '';
          } else {
            this.movies = [];
            this.error = '';
          }
        } else {
          this.movies = [];
          this.error = response.data.msg || '获取电影数据失败，请稍后重试。';
        }
      } catch (err) {
        this.movies = [];
        this.error = '请求失败，请检查网络连接或稍后重试。';
      }
    },
    formatBoxOffice(boxOffice) {
      if (boxOffice >= 100000000) {
        return (boxOffice / 100000000).toFixed(2) + ' 亿';
      } else if (boxOffice >= 10000) {
        return (boxOffice / 10000).toFixed(2) + ' 万';
      } else {
        return boxOffice;
      }
    },
  },
};
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-control {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.btn-primary {
  background-color: #007bff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.list-group-item {
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.list-group-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.alert {
  border-radius: 8px;
  padding: 10px 15px;
  margin-top: 20px;
  animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>